import React, { useState } from "react";
import { Link, Outlet, useNavigate } from "react-router-dom";

export default function Message() {
  const navigate = useNavigate();
  const [message] = useState([
    { id: "01", title: "消息一", content: "锄禾日当午" },
    { id: "02", title: "消息二", content: "汗滴禾下土" },
    { id: "03", title: "消息三", content: "谁知盘中餐" },
    { id: "04", title: "消息四", content: "粒粒皆辛苦" },
  ]);

  function handleClick(id, content) {
    navigate("params", {
      replace: false,
      state: {
        id: id,
        content: content,
      },
    });
  }
  return (
    <div>
      <ul>
        {message.map(({ id, title, content }) => {
          return (
            <li key={id}>
              <Link to="params" state={{ id: id, content: content }}>
                {title}
              </Link>
              <button onClick={() => handleClick(id, content)}>路由跳转</button>
            </li>
          );
        })}
      </ul>
      <Outlet />
    </div>
  );
}
